<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            /* width: 300px; */
        }
        .box div{
            width: 500px;
            display: flex;
            justify-content: space-between;
        }
        button{
            padding: 5px 20px;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        


        function getbooklist() {
            let box = document.querySelector('.box')
            let xhr = new XMLHttpRequest()
            xhr.open('post', 'https://www.zongheng.com/bookapi/updateList')
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
            xhr.send(`serialStatus=10&cate=0&level=1`)
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let booklist = JSON.parse(xhr.responseText)
                    console.log(booklist);
                    console.log(booklist.result.bookList)
                    let lists = booklist.result.bookList
                    for(let i = 0;i<lists.length;i++){
                        let span = document.createElement('span')
                        let btn = document.createElement('button')
                        let div = document.createElement('div')
                        btn.setAttribute('data-id',lists[i].bookId)
                        span.innerHTML = lists[i].bookName
                        btn.innerHTML = '查看章节';
                        btn.onclick = function(){window.open(`./91章节.html?${lists[i].bookId}`)}
                        div.appendChild(span)
                        div.appendChild(btn)
                        box.appendChild(div)
                    }
                }
            }
        }
        getbooklist()
        












    </script>
</body>

</html>